<div #wrapper class="ui-table ui-widget">
  <div class="ui-table-wrapper">
    <ng-container
      *ngTemplateOutlet="scrollable ? scrollableTemplate : defaultTemplate"
    ></ng-container>
    <abp-pagination
      *ngIf="rows"
      [totalPages]="totalPages"
      [(value)]="page"
      (valueChange)="pageChange.emit($event)"
    ></abp-pagination>
  </div>
</div>

<ng-template #scrollableTemplate>
  <div class="ui-table-scrollable-wrapper">
    <div class="ui-table-scrollable-view"></div>
    <div class="ui-table-scrollable-header ui-widget-header">
      <div [style.margin-left.px]="-bodyScrollLeft" class="ui-table-scrollable-header-box">
        <table class="ui-table-scrollable-header-table">
          <ng-container *ngTemplateOutlet="colGroup"></ng-container>
          <ng-container *ngTemplateOutlet="head"></ng-container>
          <tbody></tbody>
        </table>
      </div>
    </div>
    <div
      #scrollableBody
      (scroll)="bodyScrollLeft = scrollableBody.scrollLeft"
      class="ui-table-scrollable-body"
      [style.max-height]="scrollHeight"
    >
      <table class="ui-table-scrollable-body-table">
        <ng-container *ngTemplateOutlet="colGroup"></ng-container>
        <ng-container *ngTemplateOutlet="body"></ng-container>
      </table>
    </div>
  </div>
</ng-template>

<ng-template #defaultTemplate>
  <table>
    <ng-container *ngTemplateOutlet="colGroup"></ng-container>
    <ng-container *ngTemplateOutlet="head"></ng-container>
    <ng-container *ngTemplateOutlet="body"></ng-container>
  </table>
</ng-template>

<ng-template #colGroup>
  <ng-container *ngTemplateOutlet="colgroupTemplate"></ng-container>
</ng-template>

<ng-template #head>
  <thead class="ui-table-thead">
    <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
  </thead>
</ng-template>

<ng-template #body>
  <tbody class="ui-table-tbody">
    <ng-container *ngIf="value && value.length; else emptyTemplate">
      <ng-template
        #bodyTemplateWrapper
        *ngFor="let val of slicedValue; let index = index; trackBy: trackByFn"
        [ngTemplateOutlet]="bodyTemplate"
        [ngTemplateOutletContext]="{ $implicit: val, rowIndex: index }"
      ></ng-template>
    </ng-container>
  </tbody>
</ng-template>

<ng-template #emptyTemplate>
  <tr class="empty-row" #emptyRow>
    <div class="empty-row-content" [style.width.px]="emptyRow.offsetWidth">
      {{ emptyMessage | abpLocalization }}
    </div>
  </tr>
</ng-template>
